<!--
 * @Author: zl
 * @Date: 2021-02-05 14:52:13
 * @LastEditTime: 2021-11-30 18:49:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\layoutpages\system\Roles.vue
-->
<template>
    <div class="ve_container">
        <!-- 列表 -->
        <ve-table
            :table="{
                data: tableData,
            }"
            :pagination="{
                onSizeChange: (val) =>
                    handleSizeChange(val, params, getDataList),
                onCurrentChange: (val) =>
                    handleCurrentChange(val, params, getDataList),
                currentPage: page,
                pageSize: pageSize,
                total: total,
            }"
        >
            <template #tool_bar>
                <el-button
                    type="primary"
                    @click.prevent="handleEdit('添加')"
                    size="mini"
                    >添加</el-button
                >
            </template>
            <el-table-column prop="label" label="字段名称"></el-table-column>
            <el-table-column prop="type" label="字段类型">
                <template v-slot="{ row }">
                    <el-tag>
                        {{
                            typeList.filter((item) => item.code == row.type)[0]
                                .name
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="verify" label="是否必填">
                <template v-slot="{ row }">
                    <el-tag v-if="row.verify == 1"> 是 </el-tag>
                    <el-tag v-if="row.verify == 0"> 否 </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="value" label="默认值"></el-table-column>
            <el-table-column prop="list" label="选择值"></el-table-column>
            <el-table-column prop="sort" label="排序值"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template v-slot:default="{ row }">
                    <el-button
                        @click.prevent="handleEdit('编辑', row)"
                        type="primary"
                        size="mini"
                    >
                        编辑
                    </el-button>
                    <el-button
                        @click.prevent="handleDel(row.id)"
                        type="danger"
                        size="mini"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </ve-table>
        <!-- 编辑组件 -->
        <form-filed
            v-if="showDialog"
            :rowData="rowData"
            :title="dialogTitle"
            :showDialog="showDialog"
            @closeDialog="handelDialog($event)"
        />
    </div>
</template>
<script>
import FormFiled from "@/views/layoutpages/leisure/components/FormFiled";
export default {
    components: { FormFiled },
    data: () => ({
        description: "表单字段信息",
        menus: {
            search: { name: "查询" },
            add: { name: "添加" },
            detail: { name: "详情" },
            edit: { name: "编辑" },
            del: { name: "删除" },
        },
    }),
};
</script>

<script setup>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from "vue";
//*导入公共查询方法
import {
    handleSizeChange,
    handleCurrentChange,
} from "@/views/layoutpages/common";
const { proxy } = getCurrentInstance();

const rowData = ref(null);
const dialogTitle = ref("");
const showDialog = ref(false);
const tableData = ref([]);
const typeList = ref([]);
const params = reactive({
    userId: localStorage.getItem("userId"),
    pageSize: 10,
    page: 1,
    formCode: localStorage.getItem("formCode"),
});
const { pageSize, page, total } = toRefs(params);

/**
 * @description:添加or编辑事件
 * @param {*}
 * @return {*}
 */
const handleEdit = (title, row = null) => {
    showDialog.value = true;
    dialogTitle.value = title;
    rowData.value = row;
};

/**
 * @description: 获取字段类型
 * @param {*}
 * @return {*}
 */
const getFormList = async () => {
    const { code, data } = await VE_API.system.dictionaryEntityByCode({
        dicCode: "zdlx",
    });
    if (code == "00") {
        typeList.value = data;
    }
};

/**删除行数据
 * @description:
 * @param {*}
 * @return {*}
 */
const handleDel = (id) => {
    proxy
        .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
        })
        .then(async () => {
            const { code } = await VE_API.system.formFiledDel([id]);
            if (code == "00") {
                getDataList();
            }
        })
        .catch(() => {
            proxy.$message({
                type: "info",
                message: "已取消删除",
            });
        });
};

/**
 * @description: dialog事件
 * @param {*}
 * @return {*}
 */
const handelDialog = (e) => {
    showDialog.value = e;
    getDataList();
};

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    let formCode = params.formCode;
    const { code, data } = await VE_API.system.formFiledList({ formCode });
    if (code == "00") {
        // const { limit, page, total, list } = data;
        // params.limit = limit;
        // params.page = page;
        // params.total = total;
        tableData.value = data;
    }
};
onMounted(async () => {
    await getFormList();
    await getDataList();
});
</script>

<style lang="scss" scoped></style>
